<template>
  <div class="tablelist">
    <div class="title">
      <img src="@/assets/images/asset.png" alt="">
      <div>{{$t("dt.assetShow")}}</div>
    </div>
    <div class="table">
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop=""
          label=""
          width="20">
        </el-table-column>
        <el-table-column
          prop="token"
          :label="this.$t('dt.asset')">
          <template slot-scope="scope">
            <div style="display: flex;">
              <div v-if="scope.row.token==='DETH'"><img src="@/assets/images/ethUnit.png" alt=""></div>
              <div v-if="scope.row.token==='DBTC'"><img src="@/assets/images/btcUnit.png" alt=""></div>
              <div v-if="scope.row.token==='DEOS'"><img src="@/assets/images/eosUnit.png" alt=""></div>
              <div v-if="scope.row.token==='DATX'"><img src="@/assets/images/dataxpic.png" alt=""></div>
              <span style="padding-left: 5px;">{{scope.row.token}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="balance"
          :label="this.$t('dt.amount')">
          <template slot-scope="scope">
            <span>{{scope.row.balance}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="value"
          :label="this.$t('dt.value')">
          <template slot-scope="scope">
            <span>{{scope.row.value}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          :label="this.$t('dt.operating')"
          align="center">
          <template slot-scope="scope">
            <button  @click="intodatxClick(scope.row.token)">{{$t("dt.transfer")}}</button>
            <button  @click="outdatxClick(scope.row.token)">{{$t("dt.transferOut")}}</button>
            <button  v-if="scope.row.token==='DETH'||scope.row.token==='DBTC'||scope.row.token==='DEOS'"  @click="withdrawClick(scope.row.token)">{{$t("dt.withdraw")}}</button>
            <button  v-if="scope.row.token==='DETH'||scope.row.token==='DBTC'||scope.row.token==='DEOS'" @click="rechargeClick(scope.row.token)">{{$t("dt.recharge")}}</button>
          </template>
        </el-table-column>
        <el-table-column
          prop=""
          label=""
          width="20">
        </el-table-column>
      </el-table>
    </div>
    <showin-datx v-if="datxinState" @indatxListen="indatxListen " :unit="unit"></showin-datx>
    <showout-datx v-if="datxoutState" @outdatxListen="outdatxListen" :unit="unit"></showout-datx>
    <showin-eth v-if="showinEth" @inethListen="inethListen" :unit="unit"></showin-eth>
    <showout-eth v-if="ethoutState" @outethListen="outethListen" :unit="unit"></showout-eth>
    <show-password v-if="passwordState" @passwordListen="passwordListen" ></show-password>
    <show-withdraw v-if="withdrawState" @withdrawListen="withdrawListen" :unit="unit"></show-withdraw>
    <show-recharge v-if="rechargeState" @rechargeListen="rechargeListen" :unit="unit"></show-recharge>
  </div>
</template>
<script>
  import showinDatx from '@/view/frame/showinDatx.vue'
  import showoutDatx from '@/view/frame/showoutDatx.vue'
  import showinEth from '@/view/frame/showinEth.vue'
  import showoutEth from '@/view/frame/showoutEth.vue'
  import showPassword from '@/view/frame/showPassword.vue'
  import showWithdraw from '@/view/frame/showWithdraw.vue'
  import showRecharge from '@/view/frame/showRecharge.vue'
  import {getWalletBalance} from '../../api/chainApi'

  export default {
    components: {
      showinDatx,
      showoutDatx,
      showinEth,
      showoutEth,
      showPassword,
      showWithdraw,
      showRecharge
    },
    data() {
      return {
        datxinState: false,
        datxoutState: false,
        showinEth: false,
        ethoutState: false,
        passwordState: false,
        withdrawState: false,
        rechargeState: false,
        tableData: [],
        unit:''
      }
    },
    created() {
      let datxDetail = JSON.parse(window.sessionStorage.getItem("walletdetail"))
      getWalletBalance('DATX', datxDetail.name).then(res => {
        this.tableData = res.data
      })
    },
    methods: {
      // 转入datx
      intodatxClick(val) {
        this.unit=val;
        this.datxinState = true
      },
      indatxListen(data) {
        this.datxinState = data
      },

      // 转出datx
      outdatxClick(val) {
        this.unit=val;
        this.datxoutState = true
      },
      outdatxListen(data) {
        this.datxoutState = data
      },

      //   转入ETH
      inethClick(val) {
        this.unit=val;
        this.showinEth = true
      },
      inethListen(data) {
        this.showinEth = data
      },

      // 转出ETH
      outethClick(val) {
        this.unit=val;
        this.ethoutState = true
      },
      outethListen(data) {
        this.ethoutState = data
      },

      // 密码弹框
      passwordListen(data) {
        this.passwordState = data
      },
      wordClick() {
        this.passwordState = true
      },

      // 提币
      withdrawClick(val) {
        this.unit=val;
        this.withdrawState = true;
      },
      withdrawListen(data) {
        this.withdrawState = data;
      },
      // 充值
      rechargeClick(val) {
        this.unit=val;
        this.rechargeState = true
      },
      rechargeListen(data) {
        this.rechargeState = data
      }
    }
  }
</script>
<style lang="less" scoped>
  .tablelist {
    background: #fff;
    .title {
      display: flex;
      align-items: center;
      padding: 20px;
      img {
        width: 34px;
        height: 34px;
      }
      div {
        font-size: 24px;
        padding-left: 8px;
      }
    }
    .table {
      img {
        width: 28px;
        height: 28px;
        margin-bottom: -9px
      }
      span {
        line-height: 32px;
      }
      .el-table__body-wrapper {
        tr {
          height: 70px !important;
        }
      }
    }

    // 按键样式
    button {
      color: #fff;
      width: 60px;
      border-radius: 4px;
      line-height: 32px;
      text-align: center;
      background-color: #98889b;
      outline: none;
      border: none;
      cursor: pointer;
    }
    button:hover {
      opacity: .8;
    }
  }
</style>



